<template>
  <a-spin :spinning="loading">
    <el-table
      :data="tableData"
      style="width: 100%;"
      :height="height"
      row-key="id"
      :max-height="height"
      :row-class-name="tableRowClassName"
    >
      <el-table-column v-bind="item" v-for="item in dataKeys"/>
    </el-table>
    <el-pagination
      style="text-align: right;"
      background
      :page-size="queryParams.pageSize"
      :current-page.sync="queryParams.pageNum"
      @current-change="getList"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </a-spin>
</template>

<script>
  export default {
    name: 'cardTable',
    data() {
      return {
        tableData: [],
        loading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    props: {
      dataKeys: {
        type: Array,
        default: () => {
          return []
        }
      },
      height: {
        type: Number,
        default: 380
      },
      action: {
        type: Function,
        default: () => {}
      }
    },
    methods: {
      async getList(e) {
        if (e) {
          this.queryParams.pageNum = e;
        }
        const res = await this.action(this.queryParams);
        if (res) {
          this.total = res.total;
          this.tableData = res.rows;
        }
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'warning-row'
        }
        return ''
      }
    },
    mounted() {
      this.action && this.getList()
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: rgba(202, 215, 252, 0.2);
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
